<template lang="html">
  <div class="paging" v-if="pageCount">
    <div class="inner">
      <a href="#" class="prev" v-on:click.prevent="prev"><i class="prev-icon"></i>上一页</a>
      <a href="#" class="p" v-for="p in pages.left" v-on:click.prevent="current(p)" :class=" p=== cp ? 'active' : '' ">{{ p }}</a>
      <span class="dot" v-show="pages.left.length >0 && pages.middle[0]-pages.left[pages.left.length-1] > 1">...</span>
      <a href="#" class="p" v-for="p in pages.middle" v-on:click.prevent="current(p)" :class="p === cp ? 'active' : '' ">{{ p }}</a>
      <span class="dot" v-show="pages.right.length >0 && pages.middle.length >0 && pages.right[0]-pages.middle[pages.middle.length-1] > 1">...</span>
      <a href="#" class="p" v-for="p in pages.right" v-on:click.prevent="current(p)" :class="p === cp ? 'active' : '' ">{{ p }}</a>
      <a href="#" class="next" v-on:click.prevent="next">下一页<i class="next-icon"></i></a>
      <span class="join">共 {{ pageCount }} 页, 到第</span>
      <input type="type" class="goto" onkeydown="if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
    event.returnValue=false;" v-on:keycode.enter="goto" v-model.number="toPage">
      <a href="#" class="apply" v-on:click.prevent="goto">确定</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data() {
    return {
      pc:1,
      toPage: 1,        //  去第几页
      oldNum:1,
      cp: 1       
    }
  },
  props: {
    pageCount: {        //  总共多少页
      type: Number,
      required: true
    },
    currentPage: {      //  当前页
      type: Number,
      default: 1
    },
    middleCount: {     
      type: Number,
      default: 7
    },
    dotLeftCount: {     
      type: Number,
      default: 10
    },
    dotRightCount: {
      type: Number,
      default: 2
    }
  },
  computed: {
    pages() {
      let left = []
      let middle = []
      let right = []
      let middleLow=this.middleCount/2-0.5
      let middleUp=this.middleCount/2-0.5
      if(this.pc==1){
        left=[1]
      }else if(this.pc==2){
        left=[1,2]     
      }else if(this.pc==3){
        left=[1,2]     
        right=[3]
      }else if(this.pc==4){
        left=[1,2]     
        right=[3,4]
      }
      else{
        left=[1,2]
        right = [this.pc - 1, this.pc]
        let start=0
        let end=0
        if(this.cp-middleUp<2||this.cp-middleLow<4){
          start=3
        }else{
          start=this.cp-middleLow      
        }
        if(this.cp+middleUp>this.pc||this.cp+middleLow>=this.pc-2){
          end=this.pc-2
        }else{
          end=this.cp+middleLow    
        }
        for (let i = start; i <= end; i++) {
            middle.push(i)
        }
      }
      this.cp = this.cp

      return {
        left,
        middle,
        right
      }
    },
    toPage() {
        function get(){
            return this.oldNum;
        }
        function set(newValue){
            this.oldNum=newValue.replace(/[^\d]/g,'');
        }
    }
  },
  watch: {
    pageCount: function (val, oldVal) {
      this.pc = this.pageCount
      this.toPage = (this.pageCount <= 0 ? 1 : this.pageCount)
    }
  },
  attached() {},
  created() {
    this.cp = this.currentPage
    this.pc = this.pageCount
    this.toPage = (this.pageCount <= 0 ? 1 : this.pageCount)
  },
  methods: {
    prev() {
      let n = this.cp - 1
      n = n < 1 ? 1 : n
      if (n !== this.cp) {
        this.cp = n
        this.$emit('change', this.cp)
      }
    },
    next() {
      let n = this.cp + 1
      n = n > this.pageCount ? this.pageCount : n
      if (n !== this.cp) {
        this.cp = n
        this.$emit('change', this.cp)
      }
    },
    current(p) {
      if (p !== this.cp) {
        this.cp = p
        this.$emit('change', this.cp)
      }
    },
    goto() {
      if (this.toPage < 1) {
        this.toPage = 1;
      } 
      if (this.toPage > this.pageCount) {
        this.toPage = this.pageCount;
        this.$emit('change', this.cp)
      } 
      if (this.toPage <= this.pageCount && this.toPage !== this.cp) {
        this.cp = this.toPage
        this.$emit('change', this.cp)
      }
    },
    resetCurrentPage() {
      this.cp = 1
    }
  },
  components: {}
}
</script>

<style lang="css">
.paging{
  display: flex;
  align-items: center;
  font-size: 12px;
}

.paging > .inner{
  margin: 0 auto;
}

.paging > .inner > *{
  display: inline-block;
  border: 1px solid #BCC6DA;
  height: 30px;
  line-height: 30px;
  color: #7D8699;
  text-decoration: none;
  margin-right: 5px;
}

.paging > .inner .prev,
.paging > .inner .next{
  width: 78px;
  text-align: center;
  border-radius: 4px;
}
.paging > .inner .prev > i,
.paging > .inner .next > i {
    display: inline-block;
    width: 12px;
    height: 9px;
}
.paging > .inner .prev > i{
  margin-right: 5px;
  background: url("assets/images/prev_page.svg") no-repeat;
  background-size: 100% 100%;
}

.paging > .inner .next > i{
  margin-left: 5px;
  background: url("assets/images/next_page.svg") no-repeat;
  background-size: 100% 100%;
}

.paging > .inner > input{
  width: 46px;
  border-radius: 4px;
  text-align: center;
  padding: 0 5px;
}

.paging > .inner > span{
  border: 0;
}

.paging > .inner > .apply{
  width: 78px;
  text-align: center;
  border-radius: 4px;
}

.paging > .inner > .p{
  border-radius: 4px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}

.paging > .inner > .p.active{
  background-color: #6CD2CC;
  border-color: #6CD2CC;
  color: #fff;
}
</style>
